<ui:component xmlns="http://www.w3.org/1999/xhtml"  
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.prime.com.tr/ui"> 
    
<center>

 <h:form id="form">  
 
	<p:panel header="Cadastro de Centro"  >
 
	  <h:panelGrid columns="5" cellpadding="2" >
	   		
	   		<h:outputText for="sigla" value="Sigla"/>  
            <h:outputText for="nome" value="Nome"/> 
            <h:outputText for="data" value="Data da Criação"/>  
             <h:outputText/>   
             <h:outputText/>        
                     <p:inputText 
                     	id="sigla" 
                     	required="true" 
                     	label="Sigla" 
                     	size="8" 
                     	rendered="true"
                        value="#{centroBean.centro.sigla}" />             
              
                     
                     <p:inputText 
                     	id="nome" 
                     	required="true" 
                     	label="Nome" 
                     	size="40" 
                     	rendered="true"
                        value="#{centroBean.centro.nome}" /> 
            
            
                     <p:calendar id="dataCriacao" 
           				value="#{centroBean.centro.dataCriacao}" 
           				mode="popup"  
           				locale="pt_BR"
           				label="Data da Criação"
           				autocomplete="true"
           				size="10"
           				effect="drop"
           				pattern="dd/MM/yyyy" 
           				navigator="true"
        				required="true"
        				converter="primefacesCalendarConverter"/>
                        
			 <p:commandButton value="Cadastrar" image="ui-icon ui-icon-plus"
                             action="#{centroBean.cadastrarCentro}" update="centros messages"/>  
                                  
			 <p:commandButton value="Limpar" image="ui-icon ui-icon-cancel" type="reset" />                    
      
       </h:panelGrid>
</p:panel> 
      
<p:separator/>
<p:growl id="messages"/>  
<p:separator/>
 
 <p:dataTable 
 		id="centros" 
 		value="#{centroBean.centrosCadastrados}" 
  		var="centro" 
 		emptyMessage="Não Há Centros Cadastrados" 
 		paginator="true" 
 		rows="10"
 		selection="#{centroBean.centroSelecionado}"
        dynamic ="true" 
        > 
         
  		<f:facet name="header">  
                <h:outputText value="Lista de Centros"/>  
        </f:facet>
            
         <p:column headerText="Sigla">  
         
               		<center>
                    	<h:outputText value="#{centro.sigla}" style="width:8%"/>  
                	</center>
               
  	 	</p:column>  
   
        <p:column headerText="Nome">  
          
               		<center>
                    	<h:outputText value="#{centro.nome}" style="width:150px"/>  
                	</center>
                
  	 	</p:column>
        
     	<p:column headerText="Criado em" style="width:12%">  
        
               		<center>
               		<h:outputText value="#{centro.dataCriacao.time}" > 
            			<f:convertDateTime  pattern="dd/MM/yyyy"/>
            		</h:outputText>
                   	</center>
                
   		</p:column> 

</p:dataTable> 

</h:form>
</center> 

</ui:component>